<template>
	<view class="confirmOrder">
		<SRV-topbar title="买单详情" :isLeft="true"></SRV-topbar>
		<view class="goods_top">
			<view class="left">
				<image :src="info.logo" mode="aspectFill"></image>
				<text>{{info.title}}</text>
			</view>
		</view>
		<view class="main" v-for="(item,index) in info.productList" :key="index">
			<view class="line">
				<view>{{item.product_name}}</view>
				<view>
					<text>￥{{item.totalMoney}}</text>
				</view>
				<view class="goodsRemark" v-if="item.remarkList && item.remarkList.length > 0">
					<view v-for="(content, key) in item.remarkList">{{content}}</view>
				</view>
				<view class="showRemark" v-if="item.have_merchant_money_ratio > 0">可使用商铺余额支付</view>
				<view class="showRemark" v-else>不可使用商铺余额支付</view>
				<view class="showRemark" v-if="item.hava_tuan_three_ratio > 0">可使用囤陈三抵扣<span v-if="item.hava_three_commission_ratio > 0">，但需要支付<span style="color: red;">{{item.hava_three_commission_ratio}}%</span>的手续费</span></view>
				<view class="showRemark" v-else>不可使用囤陈三抵扣</view>
				<view class="showRemark" v-if="item.money_use_remark != ''" v-html="item.money_use_remark"></view>
			</view>
		</view>
		<view class="main">
            <view class="line" v-if="account.platformReward == 0 && account.platformNone == 0" @click="deductionMoney('platform_default')">
                <view style="display: flex;align-items: center;">
                    <view :class="payInfo.check_platform_default ?'selRadio':'noRadio'"></view>
            		<view>
            			<view>平台余额支付</view>
            		</view>
                </view>
            </view>
			<view class="line" v-if="account.platformReward > 0" @click="deductionMoney('platform_reward')">
			    <view style="display: flex;align-items: center;">
			        <view :class="payInfo.check_platform_reward ?'selRadio':'noRadio'"></view>
					<view>
						<view>平台余额<text style="color: red;">有奖</text>支付</view>
					</view>
			    </view>
			</view>
			<view class="line" v-if="account.platformNone > 0" @click="deductionMoney('platform_none')">
			    <view style="display: flex;align-items: center;">
			        <view :class="payInfo.check_platform_none ?'selRadio':'noRadio'"></view>
					<view>
						<view>平台余额<text style="color: red;">无奖</text>支付</view>
					</view>
			    </view>
			</view>
			<view class="line" v-if="payInfo.use_merchant_money > 0" @click="deductionMoney('check_use_merchant_money')">
			    <view style="display: flex;align-items: center;">
			        <view v-if="checkMoney('merchant_money')" :class="payInfo.check_use_merchant_money ?'selRadio':'noRadio'"></view>
					<view>
						<view>需要商家金额：<text style="color: red;">￥{{payInfo.use_merchant_money}}</text></view>
						<view>当前商家余额：<text style="color: red;">￥{{account.merchant_money}}</text></view>
					</view>
			    </view>
			    <view>
					<text v-if="!checkMoney('merchant_money')"  @click="jump('merchantOnline', 'merchantKey='+info.merchantKey)">去充值</text>
				</view>
			</view>
			<view class="line" v-if="payInfo.use_three > 0" @click="deductionMoney('check_use_three')">
			    <view style="display: flex;align-items: center;">
			        <view v-if="checkMoney('user_three')" :class="payInfo.check_use_three ?'selRadio':'noRadio'"></view>
					<view>
						<view>需要囤陈三：<text style="color: red;">￥{{payInfo.use_three}}</text></view>
						<view>当前囤陈三余额：<text style="color: red;">￥{{account.cz_qian_three}}</text></view>
					</view>
			    </view>
			</view>
			<view class="line" v-if="payInfo.deductionMoney">
			    <view style="display: flex;">
			        减免金额
			    </view>
			    <view>
					<text>-￥{{payInfo.deductionMoney}}</text>
				</view>
			</view>
			<view class="line" v-if="payInfo.check_use_merchant_money && payInfo.use_merchant_money">
			    <view style="display: flex;">
			        商家余额支付
			    </view>
			    <view>
					<text>-￥{{payInfo.use_merchant_money}}</text>
				</view>
			</view>
			<view class="line" v-if="payInfo.check_use_three && payInfo.use_three">
			    <view style="display: flex;">
			        囤陈三抵扣
			    </view>
			    <view>
					<text>-￥{{payInfo.use_three}}</text>
				</view>
			</view>
			<view class="line" v-if="payInfo.check_use_three && payInfo.commission_val > 0">
			    <view style="display: flex;">
			        囤陈三抵扣手续费
			    </view>
			    <view>
					<text>+￥{{payInfo.commission_val}}</text>
				</view>
			</view>
			<view class="line" v-if="_self.info.couponList && info.couponList.length > 0">
				<view>优惠券</view>
				<view class="right">
					<picker @change="bindCouponChange" :value="selCoupon.itemId" :range="info.couponList" range-key="itemName">
						<view class="item">{{selCoupon.itemName}}</view>
					</picker>
					<view class="jt"></view>
				</view>
			</view>
			<view class="line" v-if="selCoupon.money > 0">
				<view>优惠券金额</view>
				<text>-¥{{selCoupon.money}}</text>
			</view>
			<view class="line">
				<view>最终和计</view>
				<text>¥{{payInfo.total_money}}</text>
			</view>
		</view>
		
		<view class="main"  style="margin-bottom: 50rpx;">
			<view class="line"  v-if="rewardInfo && rewardInfo.length > 0" v-for="(ri, rk) in rewardInfo">
			    <view>{{ri.title}}</view>
			    <view><text>+{{ri.val}}</text></view>
				<view class="showRemark" v-for="(ci, ck) in ri.consistList">{{ci}}</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="pic1">
				<text>合计</text>
				<text>{{'￥'+payInfo.total_money}}</text>
			</view>
			<view class="btn" @click="createOrder()">确定支付</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" :src="'https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png'" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>应付金额</text>
					<text>￥{{payInfo.pay_money}}</text>
				</view>
				<view class="line2" v-if="payInfo.pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
					<view :class="payInfo.payment_type == 5 ?'sel':'nosel'"
						v-if="Number(payInfo.user_money) >= Number(payInfo.pay_money)"></view>
					<text v-else @click="jump('online_recharge')">余额不足</text>
				</view>
				<view class="line2" v-if="payInfo.pay_money > 0" @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="payInfo.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="claimOrder()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
    import commonPay from '../../static/commonPay.js';
	export default {
		data() {
			return {
				id: 0,
                type: 1,
                merchantCode: '',
				info: {},
				selCoupon: {},
                account: {},
				payInfo: {
				    num: 0,
					total_money: 0,
				    pay_money : 0,
				    user_money: 0,
                    merchant_money: 0,
					commission_val: 0,
				    sjrl: 0,
				    user_hdq: 0,
				    judge_cash: 0,
				    check_use_judge: false,
				    use_judge: 0,
				    check_use_hdq: false,
				    use_hdq: 0,
				    use_judge: 0,
				    check_use_one: false,
				    use_one: 0,
				    check_use_three: false,
				    use_three: 0,
                    check_use_merchant_money: false,
                    use_merchant_money: 0,
					payment_type: 0,
					platform_money: 0,
					reduction_money: 0,
					check_platform_default: 0,
					check_platform_none: 0,
					check_platform_reward: 0,
				},
                rewardInfo: [],
			}
		},
		methods: {
			numFilter (value) {
				let tempVal = parseFloat(value).toFixed(3);
				let realVal = tempVal.substring(0, tempVal.length - 1);
				return realVal;
			},
            getMerchantInfo() {
                serve.request({
                	url: '/store/order/bill-list',
                	data: {
                		appkey: uni.getStorageSync('appkey'),
                		'access-token': uni.getStorageSync('access-token'),
                		merchantKey: _self.merchantCode
                	},
                	v: '/v3'
                }).then(res => {
                    if (res.code != 200) {
                    	uni.showToast({
                    		title: res.message,
                    		icon: 'none',
                    		success() {
                    			setTimeout(function() {
                    				common.jump('index')
                    			}, 2000)
                    		}
                    	});
                        return ;
                    }
                    _self.id = res.data.orderId;
                    _self.getInfo();
                });
            },
			getInfo() {
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				serve.request({
					url: '/store/order/bill',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: _self.id
					},
					v: '/v3'
				}).then(res => {
					uni.hideLoading();
					if (res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									common.jump('index')
								}, 2000)
							}
						});
					}
					_self.info = res.data.merchantInfo;
                    _self.account = res.data.account;
                    _self.payInfo.user_money = _self.account.user_money;
                    _self.payInfo.total_money = JSON.parse(JSON.stringify(_self.info.totalMoney));
                    _self.payInfo.pay_money = JSON.parse(JSON.stringify(_self.info.totalMoney));
					_self.payInfo.use_merchant_money = _self.info.merchantMoney;
					_self.payInfo.use_three = _self.info.threeMoney;
					// _self.payInfo.platform_reward = _self.account.platformReward;
					// _self.payInfo.platform_none = _self.payInfo.platform_reward ? 0 : _self.account.platformNone;
					let defaultType = 'platform_default';
					if(_self.account.platformReward) {
						defaultType = 'platform_reward';
					} else {
						if(_self.account.platformNone) {
							defaultType = 'platform_none';
						}
					}
					_self.deductionMoney(defaultType);
					if(_self.info.couponList && _self.info.couponList.length > 0) {
					    _self.selCoupon = _self.info.couponList[0];
						_self.payInfo.pay_money = _self.numFilter(_self.payInfo.pay_money - _self.selCoupon.money);
					}
				});
			},
			bindCouponChange: function(e) {
				let key = e.detail.value;
				_self.selCoupon = _self.info.couponList[key];
				_self.total_money = JSON.parse(JSON.stringify(_self.info.total_money));
				_self.total_money = _self.numFilter(_self.total_money - _self.selCoupon.money);
				_self.$forceUpdate();
			},
			createOrder() {
				if(_self.payInfo.total_money > 0) {
					_self.payInfo.payment_type = 1;
					_self.payInfo.pay_money = JSON.parse(JSON.stringify(_self.payInfo.total_money));
					_self.$refs.popup.open();
					return ;
				}
				_self.payInfo.payment_type = _self.payInfo.check_use_merchant_money ? 6 : (_self.payInfo.check_use_three ? 7 : 0);
				_self.claimOrder();
			},
			claimOrder() {
				serve.request({
					url: '/store/order/claim',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: _self.id,
				        check_use_merchant_money: _self.payInfo.check_use_merchant_money ? 1 : 0,
				        check_use_three: _self.payInfo.check_use_three ? 1 : 0,
						platform_type: _self.payInfo.check_platform_reward ? 'reward' : (_self.payInfo.check_platform_none ? 'none' :'default'),
				        payment_type: _self.payInfo.payment_type,
					},
					v: '/v3'
				}).then(res => {
					if (res.code != 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return ;
					}
				    if(res.data.is_pay) {
						var payData = {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							pay_type: res.data.pay_type,
							pay_id: res.data.pay_id,
							payment_type: _self.payInfo.payment_type,
						};
						commonPay.payFun(payData, '/pages/store/billOrder?payCode='+_self.id);
				        return false;
				    }
				    uni.redirectTo({
				        url: '/pages/my/orderView?id='+_self.id
				    });
				});
			},
            deductionMoney(nowType = '') {
                _self.payInfo.total_money = JSON.parse(JSON.stringify(_self.info.totalMoney));
				_self.payInfo.check_platform_default = false;
				_self.payInfo.check_platform_none = false;
				_self.payInfo.check_platform_reward = false;
				_self.payInfo.check_use_merchant_money = false;
				_self.payInfo.check_use_three = false;
				if(nowType == 'platform_default') {
					_self.payInfo.check_platform_default = true;
				}
				if(nowType == 'platform_reward') {
					_self.payInfo.check_platform_reward = true;
				}
				if(nowType == 'platform_none') {
					_self.payInfo.check_platform_none = true;
				}
				if(nowType == 'check_use_merchant_money') {
					_self.payInfo.check_use_merchant_money = true;
				}
				if(nowType == 'check_use_three') {
					_self.payInfo.check_use_three = true;
				}
				_self.payInfo.commission_val = 0;
				_self.payInfo.deductionMoney = 0;
				const rewardList = [];
				rewardList[1] = {totalVal: 0, merchantVal: 0, threeVal: 0, platformVal: 0};
				rewardList[3] = {totalVal: 0, merchantVal: 0, threeVal: 0, platformVal: 0};
				_self.info.productList.forEach((it, ik) => {
					let rewardVal = 0;
					let rewardTip = "";
					it.money_use_remark = "";
					//平台余额有奖励支付
					if(_self.payInfo.check_platform_reward) {
						let nowMoney = JSON.parse(JSON.stringify(it.totalMoney));
						if(it.money_use_reward_ratio > 0) {
							nowMoney = _self.numFilter(Number(it.totalMoney) * Number(it.money_use_reward_ratio) / 100);
							let deductionMoney = _self.numFilter(Number(it.totalMoney) - Number(nowMoney));
							_self.payInfo.deductionMoney = _self.numFilter(Number(_self.payInfo.deductionMoney) + Number(deductionMoney));
							it.money_use_remark = "平台余额<span style='color: red;'>有奖</span>支付，按<span style='color: red;'>"+_self.numFilter(Number(it.money_use_reward_ratio) / 10)+"折</span>结算，优惠<span style='color: red;'>-￥"+deductionMoney+"元</span>";
						} 
						_self.payInfo.platform_money = _self.numFilter(Number(_self.payInfo.platform_money) + Number(nowMoney));
						rewardVal = _self.numFilter(Number(nowMoney) * Number(it.have_platform_reward_ratio) / 100);
						rewardList[it.rewardType].platformVal = _self.numFilter(Number(rewardList[it.rewardType].platformVal) + Number(rewardVal));
					}
					if(_self.payInfo.check_platform_none) {
						let nowMoney = JSON.parse(JSON.stringify(it.totalMoney));
						if(it.money_use_none_ratio > 0) {
							nowMoney = _self.numFilter(Number(it.totalMoney) * Number(it.money_use_none_ratio) / 100);
							let deductionMoney = _self.numFilter(Number(it.totalMoney) - Number(nowMoney));
							_self.payInfo.deductionMoney = _self.numFilter(Number(_self.payInfo.deductionMoney) + Number(deductionMoney));
							it.money_use_remark = "平台余额<span style='color: red;'>无奖</span>支付，按<span style='color: red;'>"+_self.numFilter(Number(it.money_use_none_ratio) / 10)+"折</span>结算，优惠<span style='color: red;'>-￥"+deductionMoney+"元</span>";
						} 
						_self.payInfo.platform_money = _self.numFilter(Number(_self.payInfo.platform_money) + Number(nowMoney));
					}
					if(_self.payInfo.check_use_merchant_money) {
						if(it.have_merchant_reward_ratio > 0) {
							rewardVal = _self.numFilter(Number(it.totalMoney) * Number(it.have_merchant_reward_ratio) / 100);
							rewardList[it.rewardType].merchantVal = _self.numFilter(Number(rewardList[it.rewardType].merchantVal) + Number(rewardVal));
						} else {
							rewardVal = _self.numFilter(Number(it.totalMoney) * Number(it.have_platform_reward_ratio) / 100);
							rewardList[it.rewardType].platformVal = _self.numFilter(Number(rewardList[it.rewardType].platformVal) + Number(rewardVal));
						}
					}
					if(_self.payInfo.check_use_three) {
						if(it.hava_tuan_three_ratio > 0) {
							//囤陈三抵扣是无奖励的
						} else {
							rewardVal = _self.numFilter(Number(it.totalMoney) * Number(it.have_platform_reward_ratio) / 100);
							rewardList[it.rewardType].platformVal = _self.numFilter(Number(rewardList[it.rewardType].platformVal) + Number(rewardVal));
						}
					}
					rewardList[it.rewardType].totalVal = _self.numFilter(Number(rewardList[it.rewardType].totalVal) + Number(rewardVal));
					if(_self.payInfo.check_use_three && it.commissionMoney > 0) {
					    _self.payInfo.commission_val = _self.numFilter(Number(_self.payInfo.commission_val) + Number(it.commissionMoney));
					}
				});
				_self.rewardInfo = [];
				let rewardTemp = {};
				console.info(rewardList);
				if(rewardList[1].totalVal > 0) {
					rewardTemp = {title: '奖励囤陈一', val: rewardList[1].totalVal, consistList: []};
					if(rewardList[1].merchantVal > 0) {
						rewardTemp.consistList.push("商家余额付款奖励："+rewardList[1].merchantVal);
					}
					if(rewardList[1].threeVal > 0) {
						rewardTemp.consistList.push("囤陈三抵扣奖励："+rewardList[1].threeVal);
					}
					if(rewardList[1].platformVal > 0) {
						rewardTemp.consistList.push("平台支付奖励："+rewardList[1].platformVal);
					}
					_self.rewardInfo.push(rewardTemp);
				}
				if(rewardList[3].totalVal > 0) {
					rewardTemp = {title: '奖励囤陈三', val: rewardList[3].totalVal, consistList: []};
					if(rewardList[3].merchantVal > 0) {
						rewardTemp.consistList.push("商家余额付款奖励："+rewardList[3].merchantVal);
					}
					if(rewardList[3].threeVal > 0) {
						rewardTemp.consistList.push("囤陈三抵扣奖励："+rewardList[3].threeVal);
					}
					if(rewardList[3].platformVal > 0) {
						rewardTemp.consistList.push("平台支付奖励："+rewardList[3].platformVal);
					}
					_self.rewardInfo.push(rewardTemp);
				}
				if(_self.payInfo.check_platform_reward || _self.payInfo.check_platform_none) {
					_self.payInfo.total_money = _self.numFilter(Number(_self.payInfo.total_money) - Number(_self.payInfo.deductionMoney));
				}
                if(_self.payInfo.check_use_merchant_money) {
                    _self.payInfo.total_money = _self.numFilter(Number(_self.payInfo.total_money) - Number(_self.payInfo.use_merchant_money));
                }
				if(_self.payInfo.check_use_three) {
					_self.payInfo.total_money = _self.numFilter(Number(_self.payInfo.total_money) - Number(_self.payInfo.use_three));
				}
				console.info(_self.rewardInfo);
				_self.payInfo.total_money = _self.numFilter(Number(_self.payInfo.total_money) + Number(_self.payInfo.commission_val));
				_self.$forceUpdate();
            },
			checkMoney(nowType = '') {
				if(nowType == 'merchant_money') {
					return Number(_self.account.merchant_money) >= Number(_self.payInfo.use_merchant_money);
				}
				if(nowType == 'user_three') {
					return Number(_self.account.cz_qian_three) >= Number(_self.payInfo.use_three);
				}
				return false;
			},
			close() {
				_self.$refs.popup.close();
			},
			selPayType(payType) {
				if (payType == 5 && Number(_self.payInfo.user_money) < Number(_self.payInfo.pay_money)) {
					return;
				}
				_self.payInfo.payment_type = payType;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			_self = this;
            _self.type = options.type || 1;
			_self.id = options.payCode || 0;
            _self.merchantCode = options.merchantCode || "";
			if (options.q) {
				console.info(options.q);
				var link = decodeURIComponent(options.q);
				var paramArr = link.split('=');
				_self.id = paramArr[1];
			}
			if (_self.id == 0 && _self.merchantCode == "") {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function() {
							common.jump('index')
						}, 2000)
					}
				});
				return;
			}
            if(_self.type == 1) {
                _self.getInfo();
            } else {
                _self.getMerchantInfo();
            }
		},
		onPullDownRefresh() {
			_self.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
		.confirmOrder {
			padding-bottom: 124upx !important;

			.bottom {
				padding-bottom: 12px !important;
			}
		}
	}

	.confirmOrder {
		padding-bottom: 100upx;

		.goods_top {
			display: flex;
			padding: 20rpx 30rpx 20rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #ccc;

			.left {
				font-size: 32upx;
				font-weight: 600upx;
				display: flex;
				align-items: center;
				color: #333333;

				image {
					width: 40upx;
					height: 35upx;
					margin-right: 13upx;
				}

				text {
					position: relative;
					padding-right: 30upx;
				}

			}

			.right {
				font-size: 32upx;
				display: flex;
				align-items: center;

				image {
					width: 27upx;
					height: 33upx;
					margin-right: 20upx;
				}


			}
		}

		.bottom {
			position: fixed;
			z-index: 100;
			width: 100%;
			bottom: 0upx;
			border-top: 1upx rgba(235, 236, 240, 1) solid;
			align-items: center;
			display: flex;    
			justify-content: space-between;
			z-index: 10;
			box-sizing: border-box;
			padding-bottom: env(safe-area-inset-bottom);
			height: 150upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 0px 0upx rgba(235, 236, 240, 1);
			padding-left: 30upx;
			font-size: 24upx;
			color: rgba(60, 72, 104, 0.5);

			.pic1 {
				font-size: 20upx;
				// margin-left: 100upx;
				color: rgba(60, 72, 104, 0.5);

				text:last-child {
					font-size: 28upx;
					color: #EB5938;
					margin-left: 10upx;
				}
			}

			.btn {
				// position: absolute;
				height: 100%;
				width: 300upx;
				background: #EB5938;
				line-height: 80upx;
				text-align: center;
				font-size: 28upx;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				right: 0upx;
			}
		}

		.main {
			border-bottom: 16upx rgba(102, 102, 102, 0.05) solid;
			width: 100%;
		}
		.goodsRemark {
			padding: 8rpx;
			margin: 8rpx -10rpx;
			border: 1rpx solid #cccccc;
			border-radius: 4rpx;
		}
		.showRemark {
			width: 100%;
			padding: 10upx 5upx 0 0;
			border-top: 1rpx #e0e0e0 dashed;
			margin-top: 10rpx;
			text-align: right;
		}
        .noRadio {
            width: 36upx;
            height: 36upx;
            border: 1upx solid rgba(60, 72, 104, 1);
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .selRadio {
            background-image: url(../../static/img/check.png);
            background-repeat: no-repeat;
            width: 40upx;
            height: 40upx;
            background-size: 100%;
            margin-right: 20rpx;
        }
        
		.line {
			position: relative;
			box-sizing: border-box;
			padding: 30upx;
			display: flex;
            flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			font-size: 28upx;
			color: #666666;
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text {
				color: #EB5938;
				font-size: 32upx;
			}

			.through {
				color: #ccc;
				text-decoration: line-through;
			}

			.jt {
				position: absolute;
				right: 10upx;
				top: 49upx;
				content: '';
				border: 1upx solid #CCCCCC;
				border-width: 0 3upx 3upx 0;
				padding: 6upx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}

		}

		.pic {
			box-sizing: border-box;
			padding: 37upx 30upx;
			display: flex;
			justify-content: flex-end;
			font-size: 20upx;
			color: rgba(60, 72, 104, 1);
			border-bottom: 1upx rgba(235, 236, 240, 1) solid;

			text:last-child {
				color: rgba(255, 198, 0, 1);
				font-size: 28upx;
			}

			;
		}

		.pay_type {
			position: relative;
			z-index: 200;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;

			.close {
				position: absolute;
				width: 50upx;
				height: 50upx;
				right: 40upx;
				top: 30upx;
			}

			.title {
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}

			.paypir {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;

				text:last-child {
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}

			.line2 {
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;

				.txt {
					color: #999999;
				}

				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}

				.sel {
					background-image: url(../../static/img/check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}

				.nocheck {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 20%;
				}

				.check {
					background: url(../../static/img/checkbox_check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
			}

			.pay_bot {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				height: 100upx;
				background: #FFBF0A;
				color: #fff;
				font-size: 32upx;
				line-height: 100upx;
				text-align: center;
				border-radius: 0;

				&::after {
				 border: none;
				}
			}
		}
	}
</style>
